/*
 * @Author: kanglang
 * @Date: 2021-02-23 11:22:57
 * @LastEditors: kanglang
 * @LastEditTime: 2021-03-29 08:42:47
 * @Description: 企业认证信息中 开始-截止日期
 */

import React from 'react';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { px2dp, fontColorLightGray, mainBgColorLightGray, fontColorBlack } from '@/styles';

const StartEndDateItem = ({ startTip, endTip, onStart, onEnd, longTimeChecked }) => {
  const onStartDate = () => {
    onStart && onStart();
  };
  const onEndDate = () => {
    onEnd && onEnd();
  };
  return (
    <View style={styles.container}>
      <TouchableOpacity
        style={styles.addressBox}
        onPress={onStartDate}
      >
        <View style={styles.btnInner}>
          <Text style={styles.datevalue}>{startTip || '必填，起始日期'}</Text>
        </View>
      </TouchableOpacity>
      <Text style={styles.middleTip}>至</Text>
      <TouchableOpacity
        style={styles.addressBox}
        onPress={longTimeChecked ? () => { } : onEndDate}
      >
        <View style={styles.btnInner}>
          <Text style={styles.datevalue}>{endTip || '必填，截止日期'}</Text>
        </View>
      </TouchableOpacity>
    </View>
  );
};

export default StartEndDateItem;

const styles = StyleSheet.create({
  container: {
    height: px2dp(76),
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center'
  },
  addressBox: {
    flexDirection: 'row',
    alignItems: 'center',
    marginLeft: px2dp(10),

  },
  btnInner: {
    width: px2dp(288),
    height: px2dp(76),
    backgroundColor: mainBgColorLightGray,
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: px2dp(8)
  },
  datevalue: {
    color: fontColorLightGray,
    fontSize: px2dp(28)
  },
  middleTip: {
    color: fontColorBlack,
    fontSize: px2dp(28),
    paddingHorizontal: px2dp(32)
  }
});
